<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br />
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>

    <b-button @click="News" variant="outline-primary" id="top">New Collect</b-button>
    <b-button @click="Cls" variant="outline-primary">Old Collect</b-button>
    <b-container>
      <b-row align-h="center" class="mt-3">
        <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu" key-nav="">
          <b-button-group class="mx-1">
            <b-button id="fin" variant="danger">New</b-button>
            <b-button>Edit</b-button>
            <b-button>Undo</b-button>
          </b-button-group>
          <b-dropdown class="mx-1" right text="menu">
            <b-dropdown-item>Item 1</b-dropdown-item>
            <b-dropdown-item>Item 2</b-dropdown-item>
            <b-dropdown-item>Item 3</b-dropdown-item>
          </b-dropdown>
          <b-button-group class="mx-1">
            <b-button>SaveS</b-button>
            <b-button>Cancel</b-button>
          </b-button-group>
        </b-button-toolbar>
      </b-row>
      <b-row align-h="center" class="mt-3">
        <b-form inline>
          <label class="sr-only" for="inline-form-input-name">Name</label>
          <b-input id="inline-form-input-name" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Jane Doe"></b-input>
          <label class="sr-only" for="inline-form-input-username">Username</label>
          <b-input-group prepend="@" class="mb-2 mr-sm-2 mb-sm-0">
            <b-input id="inline-form-input-username" placeholder="Username"></b-input>
          </b-input-group>
          <b-form-checkbox class="mb-2 mr-sm-2 mb-sm-0">Remember me</b-form-checkbox>
          <b-button variant="primary">Save</b-button>
        </b-form>
      </b-row>
      <b-row align-h="center" class="mt-3">
        <!-- Using props -->
        <b-input-group prepend="$" append=".00">
          <b-form-input></b-form-input>
        </b-input-group>

        <!-- Using slots -->
        <b-input-group class="mt-3">
          <b-input-group-text slot="append"><strong class="text-danger">!</strong></b-input-group-text>
          <b-form-input></b-form-input>
        </b-input-group>

        <!-- Using components -->
        <b-input-group prepend="Username" class="mt-3">
          <b-form-input></b-form-input>
          <b-input-group-append>
            <b-button variant="outline-success">Button</b-button>
            <b-button variant="info">Button</b-button>
          </b-input-group-append>
        </b-input-group>
      </b-row>
    </b-container>
    <b-container align-h="center" class="mt-3 mb-3">
      <b-table striped hover :items="respdata.data.Data" :fields="fields"></b-table>
    </b-container>
    <a class="btn btn-default" href="#top" role="button" style="position:fixed;right:0;bottom:0">回到顶部</a>
  </div>
</template>

<script>
  import {
    Message,
    Loading
  } from "element-ui"
  import 'element-ui/lib/theme-chalk/index.css';

  let loading
  let needLoadingRequestCount = 0

  function startLoading() {
    loading = Loading.service({
      target: 'document.body',
      lock: true,
      fullscreen:true,
      spinner:'el-icon-loading',
      text: '拼命加載中...',
      background: 'rgba(0,0,0,0.7)'
    })
  }

  function endloading() {
    loading.close();
  }

  export function showFullLoading() {
    if (needLoadingRequestCount === 0) {
      startLoading()
    }
    needLoadingRequestCount++
  }

  export function hideFullLoading() {
    if (needLoadingRequestCount <= 0) {
      return
    }
    needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
      endloading()
    }
  }

  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        respdata: {
          data: {
            Data: []
          }
        },
        fields: [{
            key: 'NewsType',
            label: '类型',
            sortable: true
          },
          {
            key: 'Title',
            label: '标题',
            tdClass: 'text-left',
            sortable: false
          },
          {
            key: 'Date',
            label: '日期',
            sortable: true,
            // Variant applies to the whole column, including the header and footer
            variant: 'danger'
          }
        ]
      }
    },
    methods: {
      Cls() {
        console.log('Cls');
      },
      News() {
        console.log('News');
        this.axios.defaults.timeout = 25000;
        this.axios.interceptors.request.use(
          config => {
            showFullLoading()
            return config
          },
          error => {
            return Promise.reject(error)
          }
        );
        this.axios.interceptors.response.use(
          response => {
            hideFullLoading()
            return response
          },
          error => {
            Promise.reject(error)
          }
        );
        this.axios
          .get('http://v2.find73.com/news')
          .then(resp => {
            this.respdata = resp;
            console.log(resp.data.Count);
            console.log(resp.data);
          })
          .catch(resp => {
            console.log(resp);
          });
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1,
  h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
